<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-fullpage">
  <div class="aui-header-1">
    <lv-group lvGutter='8px'>
      <h1>{{trapSetting}}</h1>
      <aui-multi-cluster-switch (onChange)="onChange()"></aui-multi-cluster-switch>
    </lv-group>
  </div>
  <div class="aui-block aui-gutter-column-md">
    <div>
      <div class="aui-header-2 aui-gutter-column-sm aui-operation">
        <h2>{{parameterConfig}}</h2>
          <div>
              <a *ngIf="isView" class="aui-link" (click)="modify()">{{editLabel}}</a>
              <lv-group *ngIf="!isView" lvGutter="8px">
                  <a [ngClass]="{'aui-link': this.formGroup.valid, 'aui-link-disabled': !this.formGroup.valid}"
                     (click)="save()">{{saveLabel}}</a>
                  <a class="aui-link" (click)="cancel()">{{cancelLabel}}</a>
              </lv-group>
          </div>
      </div>
        <lv-alert lvType="info" [lvClosable]="false">{{parameterCOnfigTip}}</lv-alert>
      <div class="dashed-line"></div>
      <ng-container *ngIf="isView">
        <lv-form [lvLabelColon]='false'>
          <lv-form-column lvWidth="50%">
            <lv-form-item *ngFor='let item of formGroupItmsLeft'>
              <lv-form-label [lvKeepRequiredWidth]='true'>{{item.label}}</lv-form-label>
              <lv-form-control>
                {{item.content | nil}}
                <div *ngIf="isCyberEngine && item.label===versionLabel && item.content===protocolVersion.V3.label">
                  <div class="aui-text-label">{{engineIdLabel}}</div>
                </div>
                <ng-container
                  *ngIf="item.label===versionLabel && item.content===protocolVersion.V3.label && !isCyberEngine && !appUtilsService.isDecouple">
                  <span class="aui-link mgt-8" lv-overflow id='outerClosable'
                    (click)="viewSnmpV3Engine()">
                    {{viewEngineLabel}}
                  </span>
                </ng-container>
              </lv-form-control>
            </lv-form-item>
          </lv-form-column>
          <lv-form-column lvWidth="50%">
            <lv-form-item *ngFor='let item of formGroupItmsRight'>
              <lv-form-label [lvKeepRequiredWidth]='true'>{{item.label}}</lv-form-label>
              <lv-form-control>{{item.content | nil}}</lv-form-control>
            </lv-form-item>
          </lv-form-column>
        </lv-form>
      </ng-container>
      <ng-container *ngIf="!isView">
        <lv-form [lvLabelColon]='false' [formGroup]="formGroup">
          <ng-container *ngIf="!version">
            <lv-form-column>
              <lv-form-item>
                <lv-form-label lvRequired>{{versionLabel}}</lv-form-label>
                <lv-form-control>
                  <lv-select formControlName="version" [lvOptions]='versionData' lvValueKey='value'
                    class="form-control-input">
                  </lv-select>
                </lv-form-control>
              </lv-form-item>
            </lv-form-column>
          </ng-container>
          <ng-container *ngIf="version === protocolVersion.V3.value">
            <lv-form-column>
              <lv-form-item>
                <lv-form-label lvRequired>{{versionLabel}}</lv-form-label>
                <lv-form-control>
                  <lv-select formControlName="version" [lvOptions]='versionData' lvValueKey='value'
                    class="form-control-input">
                  </lv-select>
                  <ng-container *ngIf="isCyberEngine">
                    <div class="aui-text-label">{{engineIdLabel}}</div>
                  </ng-container>
                  <ng-container *ngIf="!isCyberEngine">
                    <span class="aui-link mgt-8" lv-overflow id='outerClosable' (click)="viewSnmpV3Engine()">
                      {{viewEngineLabel}}
                    </span>
                  </ng-container>
                </lv-form-control>
              </lv-form-item>
              <lv-form-item>
                <lv-form-label lvRequired>{{usernameLabel}}</lv-form-label>
                <lv-form-control [lvErrorTip]='securityNameErrorTip'>
                  <input lv-input type="text" formControlName="securityName" class="form-control-input" />
                </lv-form-control>
              </lv-form-item>
              <lv-form-item>
                <lv-form-label [lvRequired]="formGroup.value.authProtocol !='None'">
                  {{authProtocol}}
                  <i lv-icon="aui-icon-help" lv-tooltip="{{ 'system_auth_protocol_label'|i18n }}"
                    lvTooltipPosition="rightTop" lvTooltipTheme="light" class="configform-constraint"
                    lvColorState='true'></i>
                </lv-form-label>
                <lv-form-control>
                  <lv-select formControlName="authProtocol" [lvOptions]='authProtocolData' lvValueKey='value'
                    class="form-control-input">
                  </lv-select>
                  <lv-group [lvGutter]="'8px'" *ngIf="formGroup.value.authProtocol !== 'HMAC_SHA2'">
                    <i lv-icon="lv-icon-status-info" lvColorState='true'></i>
                    <span>{{'system_snpm_auth_protocol_desc_label' | i18n}}</span>
                  </lv-group>
                </lv-form-control>
              </lv-form-item>
              <lv-form-item>
                <lv-form-label [lvRequired]="formGroup.value.authProtocol !='None'">{{authPwd}}</lv-form-label>
                <lv-form-control [lvErrorTip]='pwdErrorTip'>
                  <div class="form-control-input">
                    <aui-inupt-with-eye formControlName="authPwd" [lvPasteAllowed]="false" (focus)="focusAuthPwd()"
                      [lv-tooltip]="pwdComplexTipTpl" lvTooltipTrigger="focus" lvTooltipPosition="topLeft"
                      lvTooltipTheme="light">
                    </aui-inupt-with-eye>
                  </div>
                </lv-form-control>
              </lv-form-item>
              <lv-form-item>
                <lv-form-label [lvRequired]="formGroup.value.authProtocol !='None'">{{confirmAuthPwd}}
                </lv-form-label>
                <lv-form-control [lvErrorTip]='pwdErrorTip'>
                  <div class="form-control-input">
                    <aui-inupt-with-eye formControlName="authConfirmPwd" [lvPasteAllowed]="false"
                      (focus)="focusAuthConfirmPwd()" [lv-tooltip]="pwdComplexTipTpl" lvTooltipTrigger="focus"
                      lvTooltipPosition="topLeft" lvTooltipTheme="light"></aui-inupt-with-eye>
                  </div>
                </lv-form-control>
              </lv-form-item>
            </lv-form-column>
            <lv-form-column style="margin-left: 48px;">
              <lv-form-item>
                <lv-form-label
                  [lvRequired]="formGroup.value.authProtocol !='None' && formGroup.value.encryptProtocol !='None'">
                  {{encryptProtocol}}
                  <i lv-icon="aui-icon-help" lv-tooltip="{{ 'system_encrypted_protocol_label'|i18n }}"
                    lvTooltipPosition="rightTop" lvTooltipTheme="light" class="configform-constraint"
                    lvColorState='true'></i>
                </lv-form-label>
                <lv-form-control>
                  <lv-select formControlName="encryptProtocol" [lvOptions]='encryptProtocolData' lvValueKey='value'
                    [lvDisabled]="formGroup.value.authProtocol === 'None'" class="form-control-input">
                  </lv-select>
                  <lv-group [lvGutter]="'8px'" *ngIf="formGroup.value.encryptProtocol !== 'AES'">
                    <i lv-icon="lv-icon-status-info" lvColorState='true'></i>
                    <span>{{'system_snpm_encrypt_protocol_desc_label' | i18n}}</span>
                  </lv-group>
                </lv-form-control>
              </lv-form-item>
              <lv-form-item>
                <lv-form-label [lvRequired]="formGroup.value.encryptProtocol !='None'">{{encryptPwd}}
                </lv-form-label>
                <lv-form-control [lvErrorTip]='pwdErrorTip'>
                  <div class="form-control-input">
                    <aui-inupt-with-eye formControlName="encryptPwd" [lvPasteAllowed]="false"
                      (focus)="focusEncryptPwd()" [lv-tooltip]="pwdComplexTipTpl" lvTooltipTrigger="focus"
                      lvTooltipPosition="topLeft" lvTooltipTheme="light">
                    </aui-inupt-with-eye>
                  </div>
                </lv-form-control>
              </lv-form-item>
              <lv-form-item>
                <lv-form-label [lvRequired]="formGroup.value.encryptProtocol !='None'">{{confirmEncryptPwd}}
                </lv-form-label>
                <lv-form-control [lvErrorTip]='pwdErrorTip'>
                  <div class="form-control-input">
                    <aui-inupt-with-eye formControlName="encryptConfirmPwd" [lvPasteAllowed]="false"
                      (focus)="focusEncryptConfirmPwd()" [lv-tooltip]="pwdComplexTipTpl" lvTooltipTrigger="focus"
                      lvTooltipPosition="topLeft" lvTooltipTheme="light"></aui-inupt-with-eye>
                  </div>
                </lv-form-control>
              </lv-form-item>
              <lv-form-item>
                <lv-form-label>{{environmentName}}</lv-form-label>
                <lv-form-control [lvErrorTip]="securityNameErrorTip">
                  <input lv-input type="text" formControlName="contextName" class="form-control-input" />
                </lv-form-control>
              </lv-form-item>
              <lv-form-item>
                <lv-form-label>{{contextEngineId}}</lv-form-label>
                <lv-form-control [lvErrorTip]="contextEngineIdErrorTip">
                  <input lv-input type="text" formControlName="contextEngineId" class="form-control-input"
                    lv-tooltip="{{'system_engineid_invalid_label'|i18n}}" lvTooltipTheme="light"
                    lvTooltipPosition="topLeft" />
                </lv-form-control>
              </lv-form-item>
            </lv-form-column>
          </ng-container>
          <ng-container *ngIf="version === protocolVersion.V2C.value">
            <lv-form-column>
              <lv-form-item>
                <lv-form-label lvRequired>{{versionLabel}}</lv-form-label>
                <lv-form-control>
                  <lv-select formControlName="version" [lvOptions]='versionData' lvValueKey='value'
                    class="form-control-input">
                  </lv-select>
                  <lv-group [lvGutter]="'8px'">
                    <i lv-icon="lv-icon-status-info" lvColorState='true'></i>
                    <span>{{'system_snpm_version_protocol_desc_label' | i18n}}</span>
                  </lv-group>
                </lv-form-control>
              </lv-form-item>
              <lv-form-item>
                <lv-form-label lvRequired>{{communityLabel}}</lv-form-label>
                <lv-form-control [lvErrorTip]='securityNameV2CErrorTip'>
                  <div class="form-control-input">
                    <aui-inupt-with-eye formControlName="securityNameV2C" [lvPasteAllowed]="false"
                      (focus)="hasNewSecurityNameV2CHandle()" [lv-tooltip]="communityTipTpl" lvTooltipTrigger="focus"
                      lvTooltipPosition="topLeft" lvTooltipTheme="light"></aui-inupt-with-eye>
                  </div>
                </lv-form-control>
              </lv-form-item>
            </lv-form-column>
          </ng-container>
        </lv-form>
      </ng-container>
    </div>
  </div>
  <div class="aui-block aui-paginator-container">
    <div class="aui-header-2">
      <h2>{{trapIpAdress}}</h2>
    </div>
    <div class="aui-operation">
      <button lv-button lvType='primary' (click)="addTrapIpAdress('right')" [disabled]="!(addressData.length < 10)">{{
        addLabel }}</button>
      <button class="aui-button-icon" lv-button lvSize="auto" (click)="initAddressData()">
        <i lv-icon="lv-icon-refresh" [lvColorState]="true"></i>
      </button>
    </div>
    <lv-datatable [lvData]='addressData' #lvTable lvSort #sort='lvSort' [lvSortDirct]='sort'
      (lvSortChange)='changeSort($event)'>
      <thead>
        <tr>
          <th lvCellKey='ip' lvShowSort lvShowCustom>{{ipAdressLabel}}</th>
          <th lvCellKey='port' lvShowSort lvShowCustom>{{portLabel}}</th>
          <th lvCellKey='description'>{{descLabel}}</th>
          <th lvCellKey='operation' width='144px'>{{optLabel}}</th>
        </tr>
      </thead>
      <tbody>
        <ng-container *ngFor='let item of lvTable.renderData'>
          <tr>
            <td>{{item.trapIp}}</td>
            <td>{{item.port}}</td>
            <td>
              <span lv-overflow>
                {{item.description | nil}}
              </span>
            </td>
            <td width='144px'>
              <lv-operation-menu [lvItemsFn]="optsCallback" [lvData]="item"></lv-operation-menu>
            </td>
          </tr>
        </ng-container>
      </tbody>
    </lv-datatable>
  </div>
</div>

<ng-template #ipObjectFilterTpl>
  <lv-search [ngModel]="queryIpObject" (lvSearch)="searchByIpOrPort($event,'ip')"></lv-search>
</ng-template>

<ng-template #portObjectFilterTpl>
  <lv-search [ngModel]="queryPortObject" (lvSearch)="searchByIpOrPort($event,'port')"></lv-search>
</ng-template>

<ng-template #successContentTpl>
  <div [innerHTML]="successLabel"></div>
</ng-template>

<ng-template #communityTipTpl>
  <span [innerHTML]="communityTipLabel"></span>
</ng-template>

<ng-template #pwdComplexTipTpl>
  <span [innerHTML]="pwdComplexTipLabel"></span>
</ng-template>
